CSS - Natour Part1

Posted on

This series of articles are the daily study notes related to tech. It can be coding related, for CSS, JS, etc. Or design related like Photoshop, etc.Today’s notes is for the Section 5, Lecture 38 of this udemy course.

Screenshots

How to have a layer gradient over background image

1
2
3
4
5
6
7
8
9
.background {
    background-image: linear-gradient (
        to right bottom,
        rgba($color1, 0.8),
        rgba($color2, 0.8),
        url(../img/img.png)
    );
    background-size: cover;
}

How to skew background image

Skew the background

1
2
3
.parent-element {
    transform: skewY(-7deg);
}

Keep the child elements straight

1
2
3
.parent-element > * {
    transform: skewY(7deg);
}

How to give text gradient effect

1
2
3
4
5
6
7
8
9
10
.text {
    background-image: linear-gradient (
        to right, 
        rgba($color1, 0.8),
        rgba($color2, 0.8)
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}